<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>白膜3D Tiles加载测试</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.132/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.132/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
        #cesiumContainer { width: 100%; height: 100vh; }
        .info {
            position: absolute; top: 10px; left: 10px; z-index: 1000;
            background: rgba(0,0,0,0.8); color: #fff; padding: 14px; border-radius: 6px;
        }
        .controls {
            position: absolute; top: 10px; right: 10px; z-index: 1000;
            background: rgba(0,0,0,0.8); color: #fff; padding: 14px; border-radius: 6px;
        }
        button { background: #4CAF50; color: #fff; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; margin: 2px; }
        button:hover { background: #45a049; }
        button.danger { background: #e84c3d; }
        button.danger:hover { background: #cf3e30; }
        .status { margin-top: 10px; padding: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    
    <div class="info">
        <h3>白膜3D Tiles加载测试</h3>
        <div class="status" id="status">准备加载...</div>
    </div>
    
    <div class="controls">
        <h4>控制面板</h4>
        <button onclick="loadBaimoTileset()">加载白膜</button>
        <button onclick="removeBaimoTileset()" class="danger">移除白膜</button>
        <button onclick="toggleWhiteMask()">切换白膜效果</button>
        <button onclick="resetCamera()">重置视角</button>
        <div class="status" id="tilesetInfo">未加载</div>
    </div>

    <script>
        let viewer;
        let baimoTileset = null;
        let whiteMaskActive = false;

        // 初始化Cesium
        function initCesium() {
            viewer = new Cesium.Viewer('cesiumContainer', {
                terrain: Cesium.Terrain.fromWorldTerrain(),
                baseLayerPicker: true,
                geocoder: true,
                homeButton: true,
                sceneModePicker: true,
                navigationHelpButton: true,
                animation: true,
                timeline: true,
                fullscreenButton: true,
                infoBox: true,
                selectionIndicator: true,
            });

            // 设置初始视角
            viewer.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(120.16196180060605, 30.14332020097707, 1000000),
                orientation: {
                    heading: 0.0,
                    pitch: -Cesium.Math.PI_OVER_TWO,
                    roll: 0.0
                }
            });

            updateStatus('Cesium初始化完成');
        }

        // 加载白膜3D Tiles
        async function loadBaimoTileset() {
            try {
                updateStatus('正在加载白膜3D Tiles...');
                
                const tilesetUrl = 'http://211.159.175.30:8011/baimo_tileset/2/tileset.json';
                
                baimoTileset = await Cesium.Cesium3DTileset.fromUrl(tilesetUrl, {
                    maximumScreenSpaceError: 16,
                    maximumMemoryUsage: 512
                });

                // 添加到场景
                await viewer.scene.primitives.add(baimoTileset);
                
                // 自动定位到tileset
                await viewer.zoomTo(baimoTileset);
                
                updateStatus('白膜3D Tiles加载成功！');
                updateTilesetInfo('已加载', baimoTileset);
                
                // 监听加载事件
                baimoTileset.tileLoad.addEventListener(onTileLoad);
                baimoTileset.tileFailed.addEventListener(onTileFailed);
                
            } catch (error) {
                console.error('加载白膜3D Tiles失败:', error);
                updateStatus('加载失败: ' + error.message);
            }
        }

        // 移除白膜3D Tiles
        function removeBaimoTileset() {
            if (baimoTileset) {
                viewer.scene.primitives.remove(baimoTileset);
                baimoTileset = null;
                updateStatus('白膜3D Tiles已移除');
                updateTilesetInfo('未加载');
            }
        }

        // 切换白膜效果
        function toggleWhiteMask() {
            if (!baimoTileset) {
                updateStatus('请先加载白膜3D Tiles');
                return;
            }

            whiteMaskActive = !whiteMaskActive;
            
            if (whiteMaskActive) {
                // 应用白膜效果
                baimoTileset.style = new Cesium.Cesium3DTileStyle({
                    color: {
                        conditions: [
                            [true, 'color("white", 0.8)']
                        ]
                    }
                });
                updateStatus('白膜效果已启用');
            } else {
                // 移除白膜效果
                baimoTileset.style = undefined;
                updateStatus('白膜效果已禁用');
            }
        }

        // 重置相机视角
        function resetCamera() {
            viewer.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(120.16196180060605, 30.14332020097707, 1000000),
                orientation: {
                    heading: 0.0,
                    pitch: -Cesium.Math.PI_OVER_TWO,
                    roll: 0.0
                }
            });
            updateStatus('相机视角已重置');
        }

        // 瓦片加载成功事件
        function onTileLoad(tile) {
            console.log('瓦片加载成功:', tile);
        }

        // 瓦片加载失败事件
        function onTileFailed(tile, error) {
            console.error('瓦片加载失败:', tile, error);
            updateStatus('瓦片加载失败: ' + error.message);
        }

        // 更新状态显示
        function updateStatus(message) {
            document.getElementById('status').textContent = message;
            console.log('状态:', message);
        }

        // 更新tileset信息显示
        function updateTilesetInfo(status, tileset = null) {
            let info = status;
            if (tileset) {
                info += ` | 几何误差: ${tileset.geometricError.toFixed(2)}`;
                info += ` | 根瓦片: ${tileset.root ? '已加载' : '未加载'}`;
            }
            document.getElementById('tilesetInfo').textContent = info;
        }

        // 页面加载完成后初始化
        window.onload = function() {
            initCesium();
        };
    </script>
</body>
</html>


